import * as React from "react"
import {Input, Button, message} from 'antd';

const {TextArea} = Input;
import "@/css/Content.less"
import {SmileOutlined, PictureOutlined, LikeOutlined, MessageOutlined} from '@ant-design/icons';
import {axiosRequest} from "@/service";
import {withRouter} from "@/hooks/withRouter";

class Content extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            commentList: [],
            comment: '',
        }
        this.getCommentList()
    }

    getCommentList = () => {
        let articleId = this.props.location.search ? this.props.location.search.split('=')[1] : ''

        const config = {
            url: 'getComment',
            method: 'post',
            data: {
                noteId: articleId,
            }
        }

        axiosRequest(config).then((res: any) => {
            if (res && res.data && res.data.length > 0) {
                this.setMyState({commentList: res.data})
            } else {
                message.error('获取评论失败！')
            }
        }).catch((err: any) => {
            message.error('获取评论失败！')
        })
    }

    insertComment = () => {
        const config = {
            url: 'insertComment',
            method: 'post',
            data: {
                comment: this.state.comment,
                parent: 0,
                note: this.props.article.id,
            }
        }

        axiosRequest(config).then((res: any) => {
            if (res && res.code && res.code == 200) {
                message.success('评论成功！')
            } else {
                message.error('评论失败！')
            }
        }).catch((err: any) => {
            message.error('评论失败！')
        })
    }

    setMyState = (obj: object) => {
        this.setState(Object.assign({}, this.state, obj))
    }

    getCommentJsx = () => {
        return this.state.commentList.map((item: any) => {
            return (
                <article className="c_hot">
                    <img className="c-img" src={require('@/images/head_img.jpg')} alt="头像"/>
                    <div>
                        <section className="con_right">
                            <p>
                                <span className="c_author">{item.Reviewer}</span>
                                <span className="c_job">评论：</span>
                            </p>
                            <p className="c_content">{item.comment}</p>
                            <p style={{marginTop: '0.1rem'}}>
                                <span className="c_like"> <LikeOutlined style={{marginRight: "0.05rem"}}/>{item.encourage_num}</span>
                                <span className="c_msg"><MessageOutlined style={{marginRight: "0.05rem"}}/>{item.encourage_num}</span>
                            </p>
                        </section>
                    </div>
                </article>
            )
        })
    }

    render() {
        return (
            <main className="c_box">
                <p className="c_header">评论</p>
                <article className="c_text">
                    <img className="text-img" src={require('@/images/head_img.jpg')} alt="头像"/>

                    <article className="text-right">
                        <TextArea rows={2} onChange={(val: any) => {
                            this.setMyState({comment: val.target.value})
                        }} placeholder="输入评论（Enter换行）" maxLength={200}/>
                        <footer className="c_footer">
                            <div>
                                <span className="c_icon">
                                    <SmileOutlined/>
                                    <span className="icon_text">表情(暂不支持)</span>
                                </span>
                                <span className="c_icon c_marR">
                                    <PictureOutlined/>
                                    <span className="icon_text">图片(暂不支持)</span>
                                </span>
                            </div>

                            <span>
                                <span className="out_text"></span>
                                <Button type="primary" className="flex-mar"
                                        onClick={() => this.insertComment()}>发表评论</Button>
                            </span>
                        </footer>
                    </article>
                </article>

                <p className="c_header">热门评论<img style={{marginLeft: '0.1rem'}} src={require('@/images/hot.svg')}/></p>

                <article>
                    {this.getCommentJsx()}
                </article>
            </main>
        )
    }

}

export default withRouter(Content)